<template>
  <div>
    <Upload v-model="files" multiple @change="change" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Upload from '@/components/upload/index.vue'
import axios from '@/api/src/axios'

defineOptions({
  name: 'upload'
})
const files = ref<string | null>(null)

function upload(url: string, method = 'get') {
  let param: ParamApi = { url: url, method: method, paramsSerializer: params => toParams(params) }
  return (data?: string | object) => {
    if (method == 'get') {
      param.params = data
    } else {
      param.data = data
    }
    return axios({
      ...param,
      onDownloadProgress: progressEvent => {
        // getProgress.close()
        // 获取到已下载的大小
        const loaded = progressEvent.loaded
        // 获取到文件总大小
        // const total = progressEvent.total
        // progress.process = 99
        // 计算下载进度
        // const percent = total ? parseFloat(((loaded / total) * 100).toFixed(2)) : 100
        // progress.content = `下载中...     ${(loaded / 1024 / 1024).toFixed(2)}MB`
        // 打印下载进度
        // console.log(loaded, total, '下载进度：' + percent + '%')
      }
    }).then(res => {
      return res.data
    })
  }
}


const change = (file: File, done: (val: string) => void) => {
  const formData = new FormData()
  formData.append('file', file)
  upload('/file/upload', 'post')(formData).then(res => {
    console.log(res.data)
    done(res.data)
  })
}
</script>

<style lang="scss" scoped></style>
